<template>
    <div>
        <CurrencyDialog
            v-model="visible"
            title="学生信息查看"
            size="large"
            :disabled="true"
            @cancel="handleCancel"
            @confirm="handleConfirm"
        >
            <div class="teacher-detail">
                <div class="flex top-content">
                    <div style="margin-right: 60px;text-align: center;">
                        <div class="box">
                            <el-image
                                v-if="isShowImage && details.photo"
                                style="width: 100px; height: 100px;"
                                :src="details.photo"
                                :zoom-rate="1.2"
                                :max-scale="7"
                                :min-scale="0.2"
                                :preview-src-list="[details.photo]"
                                :initial-index="0"
                                fit="cover"
                            />
                            <CurrencyButton
                                v-if="details.hasAuth && !isShowImage"
                                title="点击查看"
                                :text="true"
                                link
                                color="#178782"
                                @click="showImage"
                            />
                            <span v-if="!details.hasAuth && !isShowImage">未认证</span>
                        </div>
                        <div>实名认证</div>
                    </div>
                    <!-- 信息 -->
                    <el-descriptions :column="2" title="">
                        <el-descriptions-item min-width="300" label="姓名:">{{ (details.nickname) }}</el-descriptions-item>
                        <el-descriptions-item min-width="300" label="年级:">{{ (details.gradeName) }}</el-descriptions-item>
                        <el-descriptions-item min-width="300" label="学号:">
                            <VisitorText 
                                :backups="details"
                                :modelValue="(details.username)"
                                color="#178782"
                                label="学号"
                            ></VisitorText>
                        </el-descriptions-item>
                        <el-descriptions-item min-width="300" label="二级学院:">{{ (details.deptName) }}</el-descriptions-item>
                        <el-descriptions-item min-width="300" label="手机号:">
                            <VisitorText 
                                :backups="details"
                                :modelValue="(details.phone)"
                                color="#178782"
                                label="手机号"
                            ></VisitorText>
                        </el-descriptions-item>
                        <el-descriptions-item min-width="300" label="专业:">{{ (details.majorName) }}</el-descriptions-item>
                        <el-descriptions-item min-width="300" label="账号状态:">{{ (details.enable) }}</el-descriptions-item>
                        <el-descriptions-item min-width="300" label="行政班级:">{{ (details.className) }}</el-descriptions-item>
                        <el-descriptions-item min-width="300" label="民族:">{{ (details.nation) }}</el-descriptions-item>
                        <el-descriptions-item min-width="300" label="政治面貌:">{{ (details.polityIdentity) }}</el-descriptions-item>
                        <el-descriptions-item min-width="300" label="学籍状态:">{{ (details.status) }}</el-descriptions-item>
                        <el-descriptions-item min-width="300" label="宗教信仰:">{{ (details.belief) }}</el-descriptions-item>
                        <el-descriptions-item min-width="300" label="住宿信息:">{{ (details.buildName) }}</el-descriptions-item>
                        <el-descriptions-item min-width="300" label="是否校外实习:">{{ details.practice }}</el-descriptions-item>
                        <el-descriptions-item min-width="300" label="出生年月日:">{{ details.birthDate }}</el-descriptions-item>
                        <el-descriptions-item min-width="300" label="父亲联系方式:">
                            <VisitorText 
                                :backups="details"
                                color="#178782"
                                :modelValue="(details.fatherTel)"
                                label="父亲联系方式"
                            ></VisitorText>
                        </el-descriptions-item>
                        <el-descriptions-item min-width="300" label="母亲联系方式:">
                            <VisitorText 
                                :backups="details"
                                :modelValue="(details.motherTel)"
                                color="#178782"
                                label="母亲联系方式"
                            ></VisitorText>
                        </el-descriptions-item>
                        <el-descriptions-item min-width="300" label="家庭住址:">{{ details.address }}</el-descriptions-item>
                    </el-descriptions>
                </div>
                <div>
                    <div style="margin-bottom: 20px;font-size: 16px; font-weight: 700;">教师信息</div>
                    <div class="ml-10 teacherNames">
                        <div v-for="(item, i) in details.teacherNames" :key="item + i">
                                <span v-if="i === 0">带班教师</span>
                                : {{ item }}
                        </div>
                    </div>
                </div>
            </div>
        </CurrencyDialog>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { aesDecrypt, createRef, refs } from 'dsrz/utils';
import VisitorText from '@/components/visitor/text/index.vue'
// import { clickView } from '@/api/workbenches'

const details = ref({} as infoData)
const visible = ref<boolean>(false)

const isShowImage = ref(false)
const showImage = async() => {
    isShowImage.value = true
    // await clickView({
    //     content: `查看了${details.value.nickname}的照片`
    // })
}
const handleCancel = () => { 
    isShowImage.value = false
    visible.value = false
}
const handleConfirm = () => { handleCancel() }
interface infoData {
    id: number;
    createTime: Record<string, unknown>;
    updateTime: Record<string, unknown>;
    createId: number;
    updateId: number;
    delFlag: number;
    deptId: number;
    username: string;
    password: string;
    phone: string;
    nickname: string;
    email: string;
    sex: number;
    avatar: string;
    photo: string;
    enable: boolean | string;
    remark: string;
    deviceToken: string;
    hasAuth: boolean;
    baiduFace: boolean;
    hkFace: boolean;
    pwdChange: boolean;
    gradeId: number;
    classId: number;
    majorId: number;
    campusId: number;
    buildId: number;
    roomId: number;
    nation: string;
    createName: string;
    status: string;
    className: string;
    dutyName: string;
    deptName: string;
    query: string;
    gradeName: string;
    dutyIds: Record<string, unknown>[];
    majorName: string
    polityIdentity: number | string
    belief: string
    chamberName: string
    practice: string
    birthDate: string
    fatherTel: string
    motherTel: string
    address: string
    headTeacherName: string,
    buildName: string,
    teacherNames: string[]
};
const handelPolityIdentity = (polityIdentity: number): string => {
    const polityMap: Record<number, string> = {
        1: '群众',
        2: '团员',
        3: '团员（积极分子）',
        4: '团员（预备党员',
        5: '团员（党员）',
    };
    return polityMap[polityIdentity] || '';
};
const handelStatus = (status: string) => { 
    const statusMap: Record<string, string> = {
        WBD: '未报到',
        ZJ: '在籍',  
        BLXJ: '保留学籍',
        XX: '休学',  
        TX: '退学',  
        BY: '毕业',  
        JY: '结业',  
        RW: '入伍',
        YBD: '已经报到',
    };
    return statusMap[status] || ''; 
}
const getParams = (obj: { data: infoData }) => { 
    details.value = obj.data
    const {
        nickname,
        username,
        phone,
        enable,
        polityIdentity,
        status,
        practice,
        headTeacherName,
        fatherTel,
        motherTel
     } = details.value
    // details.value.nickname = aesDecrypt(nickname)
    // details.value.username = aesDecrypt(username)
    // details.value.phone = aesDecrypt(phone)
    // details.value.fatherTel = aesDecrypt(fatherTel)
    // details.value.motherTel = aesDecrypt(motherTel)
    // details.value.enable = enable ? '启用' : '禁用'
    // details.value.polityIdentity = handelPolityIdentity(+polityIdentity)
    // details.value.status = handelStatus(status)
    // details.value.practice = practice ? '是' : '否'
    // details.value.headTeacherName = aesDecrypt(headTeacherName || '')
    details.value.teacherNames = details.value.teacherNames?.map(item => aesDecrypt(item)) || []
    visible.value = true
}
defineExpose({
    getParams
})
</script>

<style lang="scss" scoped>
.teacher-detail {
    padding:20px 10px 20px 15px;
    .top-content {
        margin-bottom: 20px;
        padding-left: 40px;
        .box {
            width: 100px;
            height: 100px;
            background: rgb(225, 225, 225);
            text-align: center;
            line-height: 100px;
            font-size: 14px;
            color: #1f2d3d;
            margin-bottom: 10px;
        }
    }
    .teacherNames {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 每行 3 列 */
        gap: 10px; /* 设置每个元素的间距 */
    }
}
</style>